<template>
  <div>
    <titleTop :titleTxet="titleTxet"></titleTop>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>头像</span>
      </div>
      <div class="img_box">
        <img
          :src="info.avatar"
          alt=""
        >
        <div v-if="info.is_auth==0?false:true" class="real real_box  real_box1">
          <img
            src="../../../assets/img/real.png"
            alt=""
          >
        </div>
      </div>

    </div>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>昵称</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.user_login}}</span>
      </div>
    </div>
    <router-link to="/mySetPhone" class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>绑定手机号</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.mobile}}</span>
      </div>
    </router-link>
  
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>出生年月</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.birthday}}</span>
      </div>
    </div>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>所在地</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.location}}</span>
      </div>
    </div>
    <router-link
      to="/mySignature"
      class="container flex f_align f_bet b_d p_t p_d"
    >
      <div class="font_32 f_w c_28">
        <span>个性签名</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.signature}}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import titleTop from "../../com/title";
import * as common from "../../../api/common.js";
export default {
  components: { titleTop },
  data() {
    return {
      titleTxet: {
        titleName: "个人中心",
        IsBool: true,
        IsShare: false
      },
      info: {
        avatar: '',
        user_login: "",
        mobile: "",
        birthday: "",
        location: "",
        signature: "",
        is_auth:''
      }
    };
  },
  beforeMount(){
    let useid = {user_id:this.$store.state.user_id};
    common.userinfo(useid).then(res=>{
        console.log(res);
        this.info.avatar = res.data.avatar;
        this.info.user_login = res.data.user_login;
        this.info.mobile = res.data.mobile;
        this.info.birthday = res.data.birthday;
        this.info.location = res.data.location;
        this.info.signature = res.data.signature;
        this.$store.commit('getsin',res.data.signature);
        this.info.is_auth = res.data.is_auth;
    })
  },
  mounted(){
    mui.back = function() {
      window.history.go(-1);
    }
  },
  methods: {}
};
</script>

<style scoped>
.img_box {
  width: 86px;
  height: 86px;
  position: relative;
}
.img_box img {
  width: 86px;
  height: 86px;
  border-radius: 10px;
}
.p_t {
  padding-top: 32px;
}
.p_d {
  padding-bottom: 32px;
}
.sub-btn {
  width: 400px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  background: #884ca4;
  border-radius: 10px;
  margin-top: 300px;
}
.sub-btn span{
  color: #fff;
}
.real {
  position: absolute;
  right: -4px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  z-index: 2;
  border-radius: 50%;
  text-align: center;
}
.real_box {
  background: #8c8c8c;
}
.real_box1 {
  background: #ffc240;
}
</style>
